<template>
	<!-- 自己封装tarbar -->
	<view class="tabbar">
		<view class="tab" v-for="(item,index) in tabbarList" 
		:key="index" 
		@tap="navigato(item.pagePath)"
		>
			<image class="thetabbarimg" v-if="item.pagePath === currentPage" :src="item.selectedIconPath" mode=""></image>
				<image class="thetabbarimg" v-else :src="item.iconPath" mode=""></image>
			<view class="text">
				{{item.text}}
			</view>
			
		</view>
	</view>
</template>

<script>
	export default {
		props:{
			currentPage:{
				type:String,
				default:'index'
			}
		},
		data() {
			return {
				//tabbarList对象数组:
				tabbarList: [{
					pagePath: "index",//命名:currentPage
					iconPath: "../../static/img/list.png",//默认图片
					selectedIconPath: "../../static/img/lists.png",//被选择的图片
					text: "首页"//列表名称
				}, {
					pagePath: "list1",
					iconPath: "../../static/tabBar/search/flag.jpg",
					selectedIconPath: "../../static/tabBar/search/flag.jpg",
					text: "列表"
				},{
					pagePath: "my",
					iconPath: "../../static/img/my.png",
					selectedIconPath: "../../static/img/mys.png",
					text: "我的"
				}]
			}
		},
		methods:{
			navigato(e){
					if( e ==="my" || e === 'list1' || e === "index"){
						//如果是my我的页面需要跳转自己的this.navigate
					this.navigateTo({
						url:`/pages/${e}/${e}`,
						animationType:"fade-in",
						animationDuration:0
					})
					
				}else{
					//这里是正常的uni跳转
					uni.redirectTo({
						url:`/pages/${e}/${e}`
					})
				}
			}
		}
	}
</script>

<style>
	.tabbar {
		background-color: #FFFFFF;
		border-top: 2rpx solid #636263;
		z-index: 999;
		position: fixed;
		left: 0;
		bottom: 0;
		width: 100%;
		height: 120rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.tab {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.thetabbarimg {
		width: 60rpx;
		height: 60rpx;
	}

	.text {
		font-size: 24rpx;
	}
</style>